<template>
  <!-- 我待处理的任务 -->
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :data-callback="dataCallback"
      row-key="id"
      :tool-button="false"
    >
      <!-- 标题 -->
      <template #etitle="scope">
        <el-link type="primary" @click="seeDetails(scope.row)">{{ formatTitle(scope.row) }}</el-link>
      </template>
    </ProTable>
    <!-- 请求详情弹窗 -->
    <EventDetailsMask ref="eventDetailsMask"></EventDetailsMask>
    <!-- 变更详情 -->
    <ChangeDetailsMask ref="changeDetailsMask"></ChangeDetailsMask>
    <!-- 问题详情 -->
    <ProblemDetailsMask ref="problemDetailsMask"></ProblemDetailsMask>
    <!-- 发布详情 -->
  </div>
</template>

<script setup lang="ts" name="PagePersonalTasksBox">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";
import { findPagePersonalTasks } from "@/api/modules/eventManagement";
import { useUserStore } from "@/stores/modules/user";
import EventDetailsMask from "@/components/Event/DetailsMask.vue";
import ChangeDetailsMask from "@/components/Change/DetailsMask.vue";
import ProblemDetailsMask from "@/components/Problem/DetailsMask.vue";
import { useRouter } from "vue-router";

const userStore = useUserStore();
const router = useRouter();
// 表格配置项
const columns = reactive([
  { prop: "etitle", label: "标题" },
  { prop: "activityName", label: "任务名称" },
  { prop: "createTime", label: "创建时间" },
  { prop: "type", label: "任务类型", width: 120 }
]);

// ProTable 实例
const proTable = ref<ProTableInstance>();

const loading = ref(false);

// 如果你想在请求之前对当前请求参数做一些操作
const getTableList = (params: any) => {
  loading.value = true;
  return findPagePersonalTasks({
    assignee: userStore.username,
    _search: false,
    sidx: "eno",
    sord: "asc",
    page: params.pageNum,
    rows: params.pageSize
  }).catch(() => {
    loading.value = false;
  });
};

// dataCallback 是对于返回的表格数据做处理
const dataCallback = (data: any) => {
  loading.value = false;
  let list = data.data;
  list.forEach(element => {
    if (element.executionId.indexOf("request") >= 0) {
      element.type = "请求";
    } else if (element.executionId.indexOf("change") >= 0) {
      element.type = "变更";
    } else if (element.executionId.indexOf("problem") >= 0) {
      element.type = "问题";
    } else if (element.executionId.indexOf("release") >= 0) {
      element.type = "发布";
    }
  });
  return {
    list: list,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};

const formatTitle = item => {
  let txt = "";
  if (item.variables && item.variables.etitle) {
    txt = item.variables.etitle;
  }
  return txt;
};

const eventDetailsMask = ref();
const changeDetailsMask = ref();
const problemDetailsMask = ref();
// 查看详情
const seeDetails = item => {
  // 当variables.eno为null 时用这个， 并判断variables.dto是否为null，为null不查看详情
  if (item.variables.eno || item.variables.dto) {
    if (item.executionId.indexOf("request") >= 0) {
      // 请求
      // eventDetailsMask.value?.open(item.variables.dto || item.variables);
      router.push("/eventManagement/index?detaileno=" + item.variables.eno + "&random=" + Math.random());
    } else if (item.executionId.indexOf("change") >= 0) {
      // 变更
      changeDetailsMask.value?.open(item.variables.dto || item.variables);
    } else if (item.executionId.indexOf("problem") >= 0) {
      // 问题
      problemDetailsMask.value?.open(item.variables.dto || item.variables);
    } else if (item.executionId.indexOf("release") >= 0) {
      // 发布
    }
  }

  // problemDetailsMask.value?.open(item.variables.dto || item.variables);
};
</script>

<style scoped lang="scss">
:deep(.card) {
  padding: 10px;
  border: none;
}
</style>
